<template>
  <div class="link-field-container">
    <template v-if="link">
      <div class="link-field">
        <div v-if="!hideCopy && !element.gatherImg" class="btn-box" style="margin-right: 4px;" @click.stop="handleCopy"><img :src="linkIcon" alt=""></div>
        <div style="flex: 1; width: 0;" class="flex-center">
          <ToolTip v-if="!element.gatherImg" :tool-tip="getUrl(link)" :content="linkName || link" :style="elWidth" is-can-click @handelClick="e => toLink(e, link)" />
          <template v-if="(isInDetail || showIcons) && autoPick && !element.gatherImg">
            <div class="btn-box ml-12">
              <el-tooltip :open-delay="1000" placement="top">
                <div slot="content">采集截图</div>
                <el-image
                  :src="element.gatherImg ? screenshots : screenshotsDisabled"
                  style="width: 14px; height: 14px"
                  @click.stop="openPreview"/>
              </el-tooltip>
            </div>
            <div v-if="hasRouteAuth('system:snapshot:read')" class="btn-box ml-12" @click.stop="handleLink">
              <el-tooltip :open-delay="1000" placement="top">
                <div slot="content">采集快照</div>
                <img :src="element.urlHtml ? snapshotIcon : snapshotIconDisabled" alt="" >
              </el-tooltip>
            </div>
          </template>
        </div>
      </div>
      <div v-if="(isInDetail || showIcons) && autoPick && element.gatherImg" class="preview-content">
        <el-image
          :src="element.gatherImg"
          :style="imaStyle"
          fit="cover"
          style="border-radius: 8px;cursor: pointer;"
          @click.stop="openPreview"/>
        <div class="tool-box">
          <div class="btn-box ml-12">
            <img :src="linkIcon" alt="">
            <ToolTip :tool-tip="getUrl(link)" :content="linkName || link" style="width: 0; flex: 1; max-width: 200px;" is-can-click @handelClick="e => toLink(e, link)" />
          </div>
          <div class="btn-box ml-12" @click.stop="openPreview">
            <el-image
              :src="element.gatherImg ? screenshots : screenshotsDisabled"
              style="width: 14px; height: 14px"/>
            <span>截图</span>
          </div>
          <div v-if="hasRouteAuth('system:snapshot:read')" class="btn-box ml-12" @click.stop="handleLink">
            <img :src="element.urlHtml ? snapshotIcon : snapshotIconDisabled" alt="" >
            <span>快照</span>
          </div>
        </div>
      </div>
    </template>
    <div v-else>--</div>
    <el-dialog
      :visible.sync="visible"
      :append-to-body="true"
      width="80%"
      class="link-dialog"
      center>
      <iframe :src="element.urlHtml" class="frame" title=""/>
      <div class="tip">采集快照为页面当前效果，可能存在图片查看不到的情况</div>
    </el-dialog>
  </div>

</template>
<script>
import { mapState } from 'vuex';
import { generateUUID } from '@/utils/tools';
import { hasRouteAuth } from '@/utils/permission';
import screenshots from '@/assets/screenshots.png';
import linkIcon from '@/assets/link-icon.png';
import screenshotsDisabled from '@/assets/screenshots-disabled.png';
import snapshotIcon from '@/assets/kuaizhao.png';
import snapshotIconDisabled from '@/assets/kuaizhao-disabled.png';
export default {
  props: {
    link: {
      type: String,
      default: ''
    },
    linkName: {
      type: String,
      default: ''
    },
    hideCopy: {
      type: Boolean,
      default: false
    },
    element: {
      type: Object,
      default: () => ({})
    },
    isTable: {
      type: Boolean,
      default: false
    },
    isInDetail: { // 是否详情页展示，isDetail可能因为事件而改变，导致实际在详情页而 isDetail 为false，这个属性不会改变，详情页永远为true
      type: Boolean,
      default: false
    },
    showIcons: {
      type: Boolean,
      default: false
    },
    autoPick: {
      type: Boolean,
      default: false
    },
    stopPropagation: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      screenshots, linkIcon, screenshotsDisabled, snapshotIcon, snapshotIconDisabled,
      visible: false
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    imaStyle() {
      const width = this.showMobilePage ? 74 : 148;
      return {
        width: width + 'px',
        height: width + 'px'
      };
    },
    elWidth() {
      const element = this.element;
      const width = element.options && element.options.width ? element.options.width + 'px' : '';
      if (this.isTable) return '';
      return {
        maxWidth: width
      };
    }
  },
  methods: {
    hasRouteAuth,
    getUrl(url) {
      if (!url) return '';
      if (url.indexOf('http://') !== 0 && url.indexOf('https://') !== 0) {
        return 'https://' + url;
      }
      return url;
    },
    toLink(e, url) {
      if (this.stopPropagation) {
        e.stopPropagation();
      }
      window.open(this.getUrl(url), '_blank');
    },
    openPreview() {
      if (!this.element.gatherImg) {
        this.$message.warning('暂未采集到截图');
        return;
      }
      this.$store.dispatch('ToggleImageViewer', {
        showImageViewer: true,
        imgData: [{ name: `${this.element.name}.png`, uid: generateUUID(), url: this.element.gatherImg }]
      });
    },
    handleCopy() {
      this.$copyText(this.link).then(() => {
        this.$message.success('复制成功');
      }, e => {
        console.error(e);
      });
    },
    handleLink() {
      if (!this.element.urlHtml) {
        this.$message.warning('暂未采集到快照');
        return;
      }
      this.visible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.link-field-container {
  flex: 1;
  ::v-deep {
    .el-dialog__header, .el-dialog__body {
      padding: 0;
    }
  }
  .preview-content {
    display: flex;
    margin-top: -28px;
    .tool-box {
      flex: 1;
      margin-left: 8px;
      .btn-box {
        display: flex;
        height: 14px;
        margin-bottom: 11px;
        color: #406EFF;
        line-height: 14px;
        font-size: 12px;
        font-weight: bold;
        img {
          width: 14px;
          margin-right: 4px;
        }
        .el-image {
          margin-right: 4px;
        }
      }
    }
  }
}
.frame {
  width: 100%;
  min-height: 500px;
  border: none;
  overflow-clip-margin: unset !important;
  overflow: auto;
}
.link-field {
  display: flex;
  max-width: 100%;
  height: 32px;
  line-height: 32px;
  .link-name {
    cursor: pointer;
    color: #406EFF;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 4px;
  }
  .btn-box {
    margin-left: 4px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
    }
  }
  .ml-12 {
    margin-left: 12px;
  }
}
.link-dialog {
  &::v-deep {
    .el-dialog {
      border-radius: 8px;
    }
  }
}
.tip {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #999;
}
</style>
